<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>支付宝小程序如何显示富文本？ | liuz2&#39;s Blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.63.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.9576afd3b3c158d98f48ec5df01fec6a.css" rel="stylesheet">
    

    

    
      

    

    

    <meta property="og:title" content="支付宝小程序如何显示富文本？" />
<meta property="og:description" content="使用 rich-text 组件和 mini-html-parser 在支付宝小程序中渲染富文本。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://liuz2.gitee.io/posts/alipay-mini-richtext/" />
<meta property="article:published_time" content="2020-08-13T19:27:42+08:00" />
<meta property="article:modified_time" content="2020-08-13T19:27:42+08:00" />
<meta itemprop="name" content="支付宝小程序如何显示富文本？">
<meta itemprop="description" content="使用 rich-text 组件和 mini-html-parser 在支付宝小程序中渲染富文本。">
<meta itemprop="datePublished" content="2020-08-13T19:27:42&#43;08:00" />
<meta itemprop="dateModified" content="2020-08-13T19:27:42&#43;08:00" />
<meta itemprop="wordCount" content="105">



<meta itemprop="keywords" content="支付宝小程序," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="支付宝小程序如何显示富文本？"/>
<meta name="twitter:description" content="使用 rich-text 组件和 mini-html-parser 在支付宝小程序中渲染富文本。"/>

	
  </head>

  <body class="ma0 avenir bg-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        liuz2&#39;s Blog
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/links/" title="Links page">
              Links
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/timeline/" title="Timeline page">
              Timeline
            </a>
          </li>
          
        </ul>
      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <h1 class="f3 athelas mt3 mb1">支付宝小程序如何显示富文本？</h1>
      
      
      <time class="f6 mv1 dib tracked" datetime="2020-08-13T19:27:42&#43;08:00">August 13, 2020</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy sans-serif f5 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><p>使用 <code>&lt;rich-text&gt;</code> 组件，可以在支付宝小程序中渲染富文本。比如：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">rich-text</span> <span style="color:#a6e22e">nodes</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ nodes }}&#34;</span>&gt;
&lt;/<span style="color:#f92672">rich-text</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">Page</span>({
    <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> {
        <span style="color:#a6e22e">nodes</span><span style="color:#f92672">:</span> [
            {
                <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;div&#39;</span>,
                <span style="color:#a6e22e">attrs</span><span style="color:#f92672">:</span> {
                    <span style="color:#66d9ef">class</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;wrapper&#39;</span>,
                    <span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;color: orange;&#39;</span>,
                },
                <span style="color:#a6e22e">children</span><span style="color:#f92672">:</span> [
                    {
                        <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;text&#39;</span>,
                        <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Hello&amp;nbsp;World!&#39;</span>
                    }
                ]
            }
        ]
    }
})
</code></pre></div><p>注意：</p>
<ol>
<li>富文本里面写 js 不支持事件执行</li>
<li><code>rich-text</code> 支持 a 标签，但不支持超链接</li>
<li><code>nodes</code> 属性只支持使用 Array 类型。如果需要支持 HTML String，需要自己将 HTML String 转化为 nodes 数组，可以使用 <a href="https://github.com/ant-mini-program/mini-html-parser" title="ant-mini-program/mini-html-parser">mini-html-parser</a> 转换。</li>
</ol>
<h2 id="mini-html-parser">mini-html-parser</h2>
<p>安装</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">$ npm install mini-html-parser2 --save
</code></pre></div><p>使用</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">// page.js
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">parse</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;mini-html-parser2&#39;</span>;

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">html</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`</span><span style="color:#e6db74">&lt;div&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;</span><span style="color:#e6db74">`</span>
<span style="color:#a6e22e">Page</span>({
    <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> {
        <span style="color:#a6e22e">nodes</span><span style="color:#f92672">:</span> [],
    },

    <span style="color:#a6e22e">onLoad</span>() {
        <span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">html</span>, (<span style="color:#a6e22e">err</span>, <span style="color:#a6e22e">nodes</span>) =&gt; {
            <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">err</span>) {
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">setData</span>({
                    <span style="color:#a6e22e">nodes</span>,
                });
            }
        })
    }
})
</code></pre></div><h2 id="参考资料">参考资料</h2>
<ol>
<li><a href="https://opendocs.alipay.com/mini/component/rich-text" title="rich-text 富文本">rich-text 富文本 - 支付宝开放平台</a></li>
<li><a href="https://github.com/ant-mini-program/mini-html-parser" title="ant-mini-program/mini-html-parser">ant-mini-program/mini-html-parser</a></li>
</ol>
<a href="https://gitee.com/liuz2/liuz2/blob/master/content/posts/alipay-mini-richtext.md#tree_comm_title" class="no-underline db b--black pa2 tc bg-black-90" style="color:#eee;">进入留言</a><ul class="pa0">
  
   <li class="list dib">
     <a href="/tags/%E6%94%AF%E4%BB%98%E5%AE%9D%E5%B0%8F%E7%A8%8B%E5%BA%8F" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">支付宝小程序</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




  <div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
    <p class="f5 b mb3">相关內容</p>
    <ul class="pa0 list">
	   
	     <li  class="mb2">
          <a href="/posts/alipay-mp-usage/">支付宝小程序使用指南</a>
        </li>
	    
    </ul>
</div>

</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://liuz2.gitee.io/" >
    &copy;  liuz2's Blog 2022 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
